<template>
    <div>
        <myHead title="影院详情" :show='true'></myHead>
        <van-cell-group >
            <van-cell >
                <p class="cinema-name">
                {{cinema.name}}
                </p>
            </van-cell>
            <van-cell >
                <div class="tag">
                    <span v-for="(item,index) in cinema.services" :key="index">{{item.name}}</span>
                    <span><van-icon name="arrow" color="#ffb232" is-link @click="showPopup"/></span>
                    
                </div>
            </van-cell>
            <van-cell >
                <div class="cinema-adress">
                    <van-icon name="location-o" size='20'/>
                    <span>{{cinema.address}}</span>
                    <van-icon name="phone-o" size='20'/>
                </div>
            </van-cell>
            <div class="film-box" >
            <div class="film-banner">
                <img v-if="films[current]" :src="films[current].poster"  class="banner-bg" alt="">
                <mySwipe 
                ref="banner"
                class="film-swipe"
                :swiperOptions="swiperOptions"
                id="myswpe" >
                    <mySwipeItem v-for="(l,i) in films" :key="i">
                        <img :src="l.poster" alt="" class="film-img">
                    </mySwipeItem>
                </mySwipe>
            </div>
            
            <van-cell >
                <div class="film-info" @click="gotofilmdetail" v-if="film">
                <h3>
                    <span>{{film.name}} <strong style="color:#ffb232;"> {{film.grade}}</strong></span>
                </h3>
                <p class="van-ellipsis">
                    <span> {{film.category}}</span> |  <span>{{film.runtime}} 分钟</span> |
                    <span> {{film.director}}</span> | 
                    <span v-for="(l,i) in film.actors" :key="i"> {{l.name}}</span>
                </p>
                 <van-icon name="arrow" size="16" />
            </div>
            </van-cell>
        </div>
        <van-popup v-model="show" closeable round position="bottom" :style="{height:'70%',width:'100%'}">
            <p class="cinema-name" style="margin-top:50px;">
                {{cinema.name}}
            </p>
            <div class="cinema-tag">
                <ul>
                    <li v-for="(item,index) in cinema.services" :key="index">
                        <div class="tag-box"><div><span>{{item.name}}</span></div><p>{{item.description}}</p></div>
                    </li>
                </ul>
                
                    
            </div>
        </van-popup>
        </van-cell-group>
    </div>
</template>

<script>
export default {
    data(){
        var that = this;
        return{
            film:null,
            films:[],
            cinema:{},
            show:false,
            current:0,
            swiperOptions:{
                slideToClickedSlide:true,
                observer:true,  
                effect : 'coverflow',
                slidesPerView: 2.5,
                centeredSlides: true,
                coverflowEffect: {
                    rotate: 5,
                    stretch: 10,
                    depth: 120,
                    modifier: 2,
                    slideShadows : false
                },
                on:{
                    slideChange: function(swiper){
                        // this === swiper
                        // console.log('改变了，activeIndex为'+this.activeIndex);
                        that.current = this.activeIndex;
                        that.film = that.films[this.activeIndex]
                    },
                },
            }
        }
    },
    mounted(){
        this.$ajax.getmaizuodata({
                cinemaId:this.$route.params.cinemaId
        },{
            'X-Host': 'mall.film-ticket.film.cinema-show-film'
        })
        .then(res=>{
            if(res.code==200){
                this.films = res.result.data.films
                this.films.forEach((item,i)=>{
                    if(item.filmId==this.$route.params.filmId){
                        this.current = i;
                    }
                })
                this.film  =  this.films[this.current]
                setTimeout(()=>{
                    this.$nextTick(()=>{
                        console.log(this.$refs.banner)
                        this.$refs.banner.slideToIndex(this.current)  // 滑动轮播 
                    })
                },600)
            }
        })

        this.$ajax.getmaizuodata({
            cinemaId:this.$route.params.cinemaId
        },{
            'X-Host': 'mall.film-ticket.cinema.info'
        })
        .then(res=>{
            if(res.code==200){
                this.cinema = res.result.data.cinema
            }
        })
    },
    methods:{
        showPopup(){
            this.show = true
        },
        gotofilmdetail(){
            this.$router.push({name:'film',params:{
                filmId:this.film.filmId
            }})
        }
    }
}
</script>
<style lang="scss">
.film-info{
    position: relative;
    h3{
        text-align: center;
    }
    .van-ellipsis{
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #797d82;
        font-size: 12px;
        line-height: 24px;
        padding: 20px;
    }
    .van-icon{
        position: absolute;
        right: 8px;
        top: 30px;
    }
}
.cinema-name{
    text-align: center;
    font-size: 16px;
    color: #191a1b;
}
.tag{
    display: flex;
    justify-content: center;
    font-size: 12px;
    span{
        border-right: 1px solid #ffb232;
        border-bottom: 1px solid #ffb232;
        color: #ffb232;
        display: inline-block;
        padding: 0 3px;
        margin: 0 5px;
        line-height: 12px;
    }
}
.cinema-adress{
    display: flex;
    justify-content: center;
    font-size: 12px;
    .van-icon{
        line-height: 30px;
    }
    span{
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        line-height: 30px;
    }
}
.film-banner{
    width:100%;
    height:160px;
    position: relative;
    .banner-bg{
        width:100%;
        height:160px;
        overflow: hidden;
        -webkit-filter: blur(20px);
        filter: blur(20px);
    }
    .film-swipe{
        width:100%;
        height:160px;
        position: absolute;
        top:0;
        left:0;
        .film-img{
            width:90px;
            height:130px;
        }
    }
}
.cinema-tag{
    ul{
        margin-top: 10px;
    li{
        // width: 100%;

        .tag-box{
            display: flex;
            padding: 10px;
            justify-content: space-between;
            div{
                span{
                border-right: 1px solid #ffb232;
                border-bottom: 1px solid #ffb232;
                color: #ffb232;
                // display: inline-block;
                // margin-top: 5px;
                padding: 0 3px;
                margin: 0 5px;
                line-height: 12px;
            }
            }
            p{
                width: 70%;
                font-size: 12px;
                color: #191a1b;
            }
        }
    }
    }
}
</style>